<!-- @format -->

<template>
  <div id="login">
    <header class="header">
      <!-- <label for="username">用户名</label>
    <input type="text" name="username" id="username" v-model="username" />
    <label for="possword">密码</label>
    <input type="text" name="possword" id="possword" v-model="password" />
    <button @click="add">登录</button>-->
      <div class="outbox">
        <van-image
          width="90px"
          height="50px"
          src="https://pic.flyco.net.cn/mall/sys/partner/20210112/logo-wap_1610433447635.png"
        />
        <van-form @submit="onSubmit" v-show="listIsshow">
          <van-field
            v-model="username"
            name="username"
            label="用户名"
            placeholder="用户名"
            :rules="[{ required: true, message: '请填写用户名' }]"
          />
          <van-field
            v-model="password"
            type="password"
            name="password"
            label="密码"
            placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]"
            autocomplete
          />
          <div style="margin: 16px">
            <van-button round block type="info" native-type="submit"
              >登录</van-button
            >
          </div>
        </van-form>
        <reg v-show="!listIsshow" :show="listIsshow" @event="regShow"></reg>
        <p @click="listIsshow = !listIsshow">{{ isShowLoginDetails }}</p>
      </div>
      <van-overlay :show="show" @click="show = flase">
        <div class="wrapper" @click.stop>
          <div class="loadout">
            <van-loading size="40px" vertical color="white"
              >登录中..</van-loading
            >
          </div>
        </div>
      </van-overlay>
    </header>
  </div>
</template>

<script>
import bcrypt from "bcryptjs";
import reg from "@/views/User/login/registered.vue";
import Cookie from "js-cookie";
import { apost } from "@utils/request";
export default {
  data() {
    return {
      username: "",
      password: "",
      value: "",
      listIsshow: true,
      listIsshow2: "c123",
      show: false
    };
  },
  computed: {
    isShowLoginDetails() {
      return this.listIsshow
        ? "没有账号？点击此处注册"
        : "已有账号？点击此处登录";
    }
  },
  methods: {
    add() {
      console.log(this.username, this.possword);
      localStorage.setItem("username", this.username);
      localStorage.setItem("password", this.password);
      this.$router.push("/");
    },
    onSubmit(values) {
      //不可逆加密算法
      this.show = true;
      var salt = bcrypt.genSaltSync(10);
      var pwd1 = bcrypt.hashSync(values.password, salt);
      values.password = pwd1;
      apost("http://localhost:3000/user/login", values).then(res => {
        if (res.data.code === 200) {
          Cookie.set("token", res.data.token, { expires: 10 });
          setTimeout(() => {
            this.$router.push({ path: "/" });
          }, 1000);
        }
      });
      console.log(Cookie.get("token"));
      // removeCookie("token");
    },
    //内侧组件传出来的值，检测是否显示组件页面
    regShow(data) {
      console.log(data);
      this.listIsshow = data.regClicked;
      this.username = data.username;
      this.password = data.password;
    }
  },
  components: {
    reg
  }
};
</script>

<style scoped lang="scss">
@import "@sass/User/login.scss";
</style>
